<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="onAdd" icon="el-icon-plus">添加</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      lazy
      default-expand-all>
      <el-table-column
        prop="id"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="title"
        label="推送主题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="content"
        label="推送内容">
      </el-table-column>
      <el-table-column
        prop="res_type"
        width="100"
        label="推送用户">
        <template slot-scope="scope">
          <el-tag
            effect="plain"
            type='success'
            v-show='scope.row.res_type===1'>全部</el-tag>
          <el-tag
            effect="plain"
            type='danger'
            v-show='scope.row.res_type===2'>月度会员</el-tag>
          <el-tag
            effect="plain"
            type='warning'
            v-show='scope.row.res_type===3'>年度会员</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="cid"
        label="推送类型"
        width="100">
        <template slot-scope="scope">
          <el-tag
            :type='scope.row.cid===1?"":scope.row.cid===2?"danger":"warning"'>
            {{scope.row.cid===1?"类目":scope.row.cid===2?"特惠":"快讯"}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="推送时间"
        width="180">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="添加推送"
      :visible.sync="dialogVisible">
      <!-- :rules="rules" -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <el-form-item label="推送主题" prop="title" required>
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="推送内容" prop="content" required>
          <el-input type="textarea" v-model="ruleForm.content"></el-input>
        </el-form-item>
        <el-form-item label-width='0'>
        <el-col :span="12">
          <el-form-item label="推送类型" prop="cid" required>
            <el-select v-model="ruleForm.cid" placeholder="请选择推送类型">
              <el-option label="类目" value="1"></el-option>
              <el-option label="特惠" value="2"></el-option>
              <el-option label="快讯" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推送活动" prop="rid" required>
            <el-input type="number" placeholder="请填写活动id" v-model="ruleForm.rid"></el-input>
          </el-form-item>
        </el-col>
        </el-form-item>
        <!-- <el-form-item label="推送用户">
          <el-radio-group v-model="ruleForm.res_type">
            <el-radio :label="3">年度会员</el-radio>
            <el-radio :label="2">月度会员</el-radio>
            <el-radio :label="1">全部</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, save } from '@/api/push'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-create_time',
        where: []
      },
      ruleForm: {
        rid: '',
        title: '',
        cid: '',
        content: '',
        res_type: 1
      },
      rules: {
        title: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 添加推送
    onAdd() {
      this.dialogVisible = true
    },
    getList() {
      this.listLoading = true
      list().then(response => {
        this.listLoading = false
        if (response.status) {
          this.list = response.data.data
          this.total = response.data.total
        }
      })
    },
    // 提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store.commit('SHOW_LOADING')
          save(this.ruleForm).then(res => {
            this.$store.commit('HIDE_LOADING')
            this.getList()
            this.dialogVisible = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
</style>
